﻿<script setup lang="ts" name="EpLink">
import { storeToRefs } from 'pinia'
import { useAppStoreWithOut } from '@/store/modules/app'

const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)
</script>
<template>
  <PageWrap scroll>
    <el-space :size="systemConfig.space" fill>
      <el-row>
        <el-col>
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>基础用法</span>
              </div>
            </template>
            <el-form>
              <ElFormItem>
                <el-link href="https://www.baidu.com" target="_blank">默认链接</el-link>
                <el-link type="primary">主要链接</el-link>
                <el-link type="success">成功链接</el-link>
                <el-link type="warning">警告链接</el-link>
                <el-link type="danger">危险链接</el-link>
                <el-link type="info">信息链接</el-link>
              </ElFormItem>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>禁用状态</span>
              </div>
            </template>
            <el-form>
              <ElFormItem>
                <el-link href="https://www.baidu.com" target="_blank" disabled>默认链接</el-link>
                <el-link type="primary" disabled>主要链接</el-link>
                <el-link type="success" disabled>成功链接</el-link>
                <el-link type="warning" disabled>警告链接</el-link>
                <el-link type="danger" disabled>危险链接</el-link>
                <el-link type="info" disabled>信息链接</el-link>
              </ElFormItem>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>下划线</span>
              </div>
            </template>
            <el-form>
              <ElFormItem>
                <el-link href="https://www.baidu.com" target="_blank" :underline="false">无下划线</el-link>
                <el-link href="https://www.baidu.com" target="_blank">有下划线</el-link>
              </ElFormItem>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>带图标链接</span>
              </div>
            </template>
            <el-form>
              <ElFormItem>
                <el-link icon="Edit">编辑</el-link>
                <el-link>
                  选中
                  <svg-icon class="el-icon--right" icon="ep:check" />
                </el-link>
              </ElFormItem>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-space>
  </PageWrap>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}
</style>
